<template>
  <div class="about">
    <h1>This is a WebSQL demo</h1>
    <h3><s>比较鸡肋</s></h3>
    <el-button @click="sqlCreate">创建数据库</el-button>
    <el-button @click="initSqlDate">数据库内创建一个名为LOGS的数据表</el-button>
    <el-button @click="selectSqlDate">查询数据库内容</el-button>
    <!-- <el-button @click="clearSqlDate">清除表内容</el-button> -->
    <el-button @click="DelSqlTable">清空数据表</el-button>
    <div id="status"></div>
    <el-button type="primary">dfadfa</el-button>
  </div>
</template>
<script>
export default {
  data() {
    return {
      db: null
    };
  },
  methods: {
    sqlCreate() {
      //创建数据库对象,允许最大30M空间
      this.db = openDatabase("mydb", "1.0", "Test DB", 30 * 1024 * 1024);
    },

    // 注入数据
    initSqlDate() {
      this.db.transaction(function(tx) {
        for (let i = 0; i < 1000; i++) {
            tx.executeSql('CREATE TABLE IF NOT EXISTS LOGS (id unique, log)');
            tx.executeSql('INSERT INTO LOGS (id, log) VALUES (' + i + 1 + ', " test infos test infos test infos test infos test infos test infos")');
            tx.executeSql('INSERT INTO LOGS (id, log) VALUES (' + i + 2 + ', " test infos test infos test infos test infos test infos test infos")');
            tx.executeSql('INSERT INTO LOGS (id, log) VALUES (' + i + 3 + ', " test infos test infos test infos test infos test infos test infos")');
            tx.executeSql('INSERT INTO LOGS (id, log) VALUES (' + i + 4 + ', " test infos test infos test infos test infos test infos test infos")');
            tx.executeSql('INSERT INTO LOGS (id, log) VALUES (' + i + 5 + ', " test infos test infos test infos test infos test infos test infos")');
            tx.executeSql('INSERT INTO LOGS (id, log) VALUES (' + i + 6 + ', " test infos test infos test infos test infos test infos test infos")');
            tx.executeSql('INSERT INTO LOGS (id, log) VALUES (' + i + 7 + ', " test infos test infos test infos test infos test infos test infos")');
            tx.executeSql('INSERT INTO LOGS (id, log) VALUES (' + i + 8 + ', " test infos test infos test infos test infos test infos test infos")');
            tx.executeSql('INSERT INTO LOGS (id, log) VALUES (' + i + 9 + ', " test infos test infos test infos test infos test infos test infos")');
            tx.executeSql('INSERT INTO LOGS (id, log) VALUES (' + i + 1 + '0, " test infos test infos test infos test infos test infos test infos")');
        }
      });
    },

    // 查询数据
    selectSqlDate() {
      this.db.transaction(function(tx) {
        tx.executeSql(
          "SELECT * FROM LOGS",
          [],
          function(tx, results) {
            var len = results.rows.length,
              i;
            msg = "<p>查询记录条数: " + len + "</p>";
            document.querySelector("#status").innerHTML += msg;
            var msg;
            for (i = 0; i < len / 50; i++) {
              msg = "<p><b>" + results.rows.item(i).log + "</b></p>";
              document.querySelector("#status").innerHTML += msg;
            }
          },
          null
        );
      });
    },
    //清除表数据
    // clearSqlDate() {
    //   this.db.transaction(function(tx) {
    //     var strSQL = "drop table " + "LOGS";
    //     tx.executeSql(
    //       strSQL,
    //       [],
    //       function(tx, results) {
    //         console.log("删除了" + "LOGS" + "表");
    //       },
    //       function(tx, error) {
    //         console.log("删除" + "LOGS" + "表失败，错误信息:" + error.message);
    //       }
    //     );
    //   });
    // },
    //清空
    DelSqlTable() {
      this.db.transaction(function(tx) {
        var deleteTableSQL = "DELETE FROM " + "LOGS";
        tx.executeSql(
          deleteTableSQL,
          [],
          function(tx, result) {
            console.log("删除表成功 " + "LOGS");
          },
          function(tx, error) {
            console.error("删除表失败:" + tableName + error.message);
          }
        );
      });
    }
  }
};
</script>
